<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>学生选择</title>
	<meta name="decorator" content="ani"/>
	<%@ include file="/webpage/include/bootstraptable.jsp"%>
	<script type="text/javascript">
		$(document).ready(function() {
			//初始化表格
			  $('#table').bootstrapTable({

                  //请求方法
                  method: 'post',
                  //类型json
                  dataType: "json",
                  contentType: "application/x-www-form-urlencoded",
	                 //是否显示行间隔色
	                striped: true,
	                //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
	                cache: false,
	                //是否显示分页（*）
	                pagination: true,
	                 //排序方式
	                sortOrder: "asc",
	                //初始化加载第一页，默认第一页
	                pageNumber:1,
	                //每页的记录行数（*）
	                pageSize: 5,
	                //可供选择的每页的行数（*）
	                pageList: [5, 10,  'ALL'],
	                //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
	                url: "${ctx}/buzz/sign/sign/getEntryList?roomid=${roomid}",
	                //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
	                //queryParamsType:'',
	                ////查询参数,每次调用是会带上这个参数，可自定义
	                queryParams : function(params) {
	                	var searchParam = $("#searchForm").serializeJSON();
	                	searchParam.pageNo = params.limit === undefined? "1" :params.offset/params.limit+1;
	                	searchParam.pageSize = params.limit === undefined? -1 : params.limit;
	                	searchParam.orderBy = params.sort === undefined? "" : params.sort+ " "+  params.order;
	                    return searchParam;
	                },
	                //分页方式：client客户端分页，server服务端分页（*）
	                sidePagination: "server",
	                onClickRow: function (row, $element) {
			$('.info').removeClass('info');//移除class
			$($element).addClass('info');//添加class
		},
                  onShowSearch: function () {
                      $("#search-collapse").slideToggle();
                  },
	                columns: [{
	                		checkbox: true
                        }, {
                            field: 'student.name',
                            title: '学生名称',
                            sortable: true

                        }

					]

				});

			  $('#table').on('check.bs.table uncheck.bs.table load-success.bs.table ' +
		                'check-all.bs.table uncheck-all.bs.table', function () {
		            $('#remove').prop('disabled', ! $('#table').bootstrapTable('getSelections').length);
		            $('#edit').prop('disabled', $('#table').bootstrapTable('getSelections').length!=1);
		        });



			  $("#search").click("click", function() {// 绑定查询按扭

				  $('#table').bootstrapTable('refresh');
				});
			  $("#reset").click("click", function() {// 绑定查询按扭
				  $("#searchForm  input").val("");
				  $("#searchForm  select").val("");
				  $('#table').bootstrapTable('refresh');
				});


		});

		  function getIdSelections() {
		        return $.map($("#table").bootstrapTable('getSelections'), function (row) {
		            return row.student.name
		        });
        }
		  function getLabelSelections() {
		        return $.map($("#table").bootstrapTable('getSelections'), function (row) {
		            return row.student.name
		        });
		    }
		  function getSelections() {
		        return $.map($("#table").bootstrapTable('getSelections'), function (row) {
		            return row
		        });
		    }

	</script>
</head>
<body class="bg-white">

	<div class="wrapper wrapper-content">
	<div class="row">

		<div  class="col-sm-12 col-md-12 animated fadeInRight">
            <div class="accordion-group">
                <div id="collapseTwo" class="accordion-body">
                    <div class="accordion-inner">
                    <form id="searchForm" class="form form-horizontal well clearfix">
                        <div class="col-xs-4 col-sm-2 col-md-2">
                            <label class="label-item single-overflow pull-left" title="学生名称：">学生名称：</label>
                            <input id="student.name" name="student.name" htmlEscape="false" maxlength="100"  class=" form-control"/>
                        </div>

                        <div class="col-xs-4 col-sm-3 col-md-3">
                            <div style="margin-top:26px">
                                <a  id="search" class="btn btn-default btn-rounded  btn-bordered btn-sm"><i class="fa fa-search"></i> 查询</a>
                                <a  id="reset" class="btn btn-default btn-rounded  btn-bordered btn-sm" ><i class="fa fa-refresh"></i> 重置</a>
                            </div>
                        </div>
                    </form>
                    </div>
                </div>
            </div><!-- 搜索框结束 -->
	    <!-- 表格 -->
	    <table id="table"
	           data-toolbar="#toolbar"
	           data-minimum-count-columns="2"
	           data-id-field="id">
	    </table>

	</div>
	</div>
	</div>
</body>
</html>
